<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body {background:url(page_bg.png);}
img{ border:none}
*{ margin:0; padding:0; font-size:14px; color:#333}

.c{
     padding:10px;
}
    
.b{
	 border-bottom-left-radius:5px; 
	 border-bottom-right-radius:5px;
	 border-top-left-radius:5px; 
	 border-top-right-radius:5px;
	 border-width:1px; 
	 border-style:solid;
 	 border-top-color:#dcdcdc;
 	 border-right-color:#dcdcdc; 
 	 border-bottom-color:#dcdcdc; 
	 border-left-color:#dcdcdc;
	 line-height:30px;
	 margin:10px;
}

div {
    background-color:white;
}

ul li{
	border-bottom:1px #ddd solid;
	list-style:none;
}

input {
    width:15px;
    height:15px;
    margin-right:10px;
}

.content {
    color:gray;
    line-height:16px;
}

.tip {
    margin-left:10px;
    width:190px;
    color:gray;
}

.fl{ float:left}
.fr{ float:right}

.clearfix:after {clear:both; content:'';display: block;font-size: 0;line-height: 0;visibility: hidden; width: 0;height: 0;}
.clearfix {+display: inline-block;}
* html .clearfix {height: 1%;} 

</style>

<script>
//某个省被点中后的事件
function click_event(code) {
    location.href = "open:select_city?" + code;
}

//根据全局变量provinces来绘制省份视图
//provinces没有定义，由OC向UIWebView调用
function show() {
	for (var i = 0; i < provinces.length; i++) {
		list.innerHTML += "<li class='clearfix c'> \
                    <label class='fl'><input type='checkbox' id='area_" + i + "' value='"+ i + "' onClick='province_onclick("+ i +");'><span id='name_"+ i +"'>" + provinces[i] + "</span></label>\
            <div id='tip_" + i + "'  onClick='javascript:click_event(" + i + ");' class='fl tip'>&nbsp;</div>\
                    <img src='arrow-r.png' class='fr' style='margin-top:5px'>\
            </li>";
	}
}
    //                <div id='content_"+ i +"'  onClick='javascript:click_event(" + i + ");' class='content'></div>\

//某个省被点选事件
//如果是选中，就显示"xx整个城市"
//如果是取消选中，就什么都不显示
function province_onclick(code) {
    var checkboxes = document.getElementsByTagName("input");
    var content = document.getElementById("content_" + code);
    var tip = document.getElementById("tip_" + code);
    var name = document.getElementById("name_" + code);
    
    if (checkboxes[code].checked == true) {
        tip.innerHTML = name.innerHTML + "整个城市";
        tip.style.lineHeight = "30px";
    }
    else {
        tip.innerHTML = "&nbsp;";
    }
}

//设定并显示被选中的城市
//如果city_string=all，就全部选中，并显示"xx整个城市"
//如果city_string=""，就全部不选中，并什么都不显示
//如果city_string不为前两个状态，就是用逗号分隔的城市名称，切割后显示出来
function cities_selected(code, city_string) {
    var obj = document.getElementsByTagName("input")[code];
    var name = document.getElementById("name_" + code);
    var tip = document.getElementById("tip_" + code);
    tip.innerHTML = "";
    tip.style.lineHeight = "30px";
    
    if (city_string == "all") {
        obj.checked = true;
        tip.innerHTML = name.innerHTML + "整个城市";
    }
    else if (city_string == "") {
        obj.checked = false;
        tip.innerHTML = "&nbsp;";
    }
    else {
        obj.checked = false;
        var cities = city_string.split(',');

        if (city_string.length > 12) {
            tip.style.lineHeight = "16px";
        }
        
        var innerHTML = "";
        for (var i = 0; i < cities.length; i++) {
            //innerHTML += "<span style='margin-right:5px'>" + cities[i] + "</span>";
            innerHTML += cities[i] + " ";
        }
        tip.innerHTML = innerHTML;
    }
}

//得到一个省得选中状态
function check_status(code) {
    var checkboxes = document.getElementsByTagName("input");
    
    return checkboxes[code].checked;
}
    
//获取某一个省下的城市选中状态
//provices是OC下发的全局，代表了本页所有的省数据
function select_result(province_name) {
    var result = "";
    
    for (var i = 0; i < provinces.length; i++) {
        var name = document.getElementById("name_" + i);

        if (name.innerHTML == province_name) {
            var city_string = document.getElementById("tip_" + i);
            result = city_string.innerHTML;
            
            break;
        }
    }
    
    if (result.length > 0) {
        
        if (result.substring(result.length - 4) == "整个城市") {
            
            result = "all";
        }
        else if (result.substring(0, 5) == "&nbsp") {
            
            result = "";
        }
        else {
            //去掉最后一个空格后（由show方法产生），替换所有的空格为逗号
            result = result.substring(0, result.length - 1).replace(/ /g, ",");
        }
    }
    
    
    return result;
}
</script>
</head>

<body>
    <div id='param'></div>
	<div class="b">
    	<ul id="list">
    		<li style="text-align:center" class="clearfix">选择一个省就包含所有城市</li>
            
        </ul>
    </div>
</body>
</html>

